<template>
	<view class="points-container">

		<!-- Points Display Section -->
		<view class="points-display">
			<image class="crown-bg"
				src="https://www.ruilongan.com/profile/upload/2025/07/16/Frame_6@2x (2)_20250716105109A105.png"
				mode="aspectFit"></image>
			<view class="points-number">{{userInfo.usableIntegral}}</view>
			<view class="points-actions">
				<text @click="navigateToPointsDetail">积分明细</text>
				<text @click="navigateToPointsRule">积分规则</text>
			</view>
		</view>
		<view>
			<u-notice-bar :text="text1" :show-icon="false" :color="'#F86E21'"></u-notice-bar>
		</view>

		<!-- Task Sections -->
		<view class="task-sections">
			<view v-for="(section, sectionIndex) in taskSections" :key="sectionIndex">
				<!-- Task Title Header -->
				<view class="task-title-header">
					<text class="main-title">{{section.title}}</text>
					<text v-if="sectionIndex === 0" class="exchange-btn" @click="navigateToPointsShop">去免费兑换</text>
				</view>

				<!-- Task Items -->
				<view v-for="(task, taskIndex) in section.tasks" :key="taskIndex" class="task-item">
					<view class="task-info">
						<view class="task-title">
							<text>{{task.name}}</text>
							<image class="task-icon"
								src="https://www.ruilongan.com/profile/upload/2025/07/17/积分log@2x (2)_20250717141644A106.png"
								mode="aspectFit"></image>
							<text class="task-points">+{{task.points}}控糖积分</text>
						</view>
						<text class="task-desc">{{task.desc}}</text>
					</view>
					<view class="task-reward" @tap="toTask(task)">
						<text :class="['status', task.isCompleted ? 'completed' : '']">{{task.status}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {
		getInfo
	} from '@/api/vipUser.js'
	import {
		listTask
	} from '@/api/task.js'


	export default {
		computed: mapGetters(['name', 'userId']),
		data() {
			return {
				points: 0,
				text1: '每日积分攒一攒，免费兑换控糖产品！',
				userInfo: {},
				taskSections: []
			}
		},
		onShow() {
			// TODO 后边放缓存，所有用户头像名称等（改之后更新，随后直接取）
			this.getInfo()
			this.listTask()
		},
		created() {},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			navigateToPointsDetail() {
				uni.navigateTo({
					url: '/subPackage_1/pages/mine/points/points-detail'
				})
			},
			navigateToPointsRule() {
				uni.navigateTo({
					url: '/subPackage_1/pages/mine/points/points-rule'
				})
			},
			navigateToPointsShop() {
				uni.navigateTo({
					url: '/pages/shop/pointsIndex'
				})
			},


			getInfo() {
				if (this.userId) {
					getInfo(this.userId).then(res => {
						this.userInfo = res.data
					})
				}
			},
			// 组装任务分组
			buildTaskSections(tasks) {
				if (!Array.isArray(tasks)) {
					this.taskSections = []
					return
				}
				const groups = {}
				tasks.forEach(task => {
					const label = task.integralTypeLable || task.integralTypeLabel || task.integralTypeName || task
						.typeName || '其他任务'
					if (!groups[label]) {
						groups[label] = []
					}
					const isCompleted = String(task.isFinish) === '1' || task.isFinish === 1
					groups[label].push({
						name: task.task || '',
						points: task.rewardsPoints || 0,
						desc: task.briefing || '',
						integralTypeLable:task.integralTypeLable,
						status: isCompleted ? '已完成' : '去完成',
						isCompleted
					})
				})
				this.taskSections = Object.keys(groups).map(label => ({
					title: label,
					tasks: groups[label]
				}))
				console.log(this.taskSections)
			},
			// 拉取任务并分组到 taskSections
			listTask() {
				listTask().then(res => {
					const rows = Array.isArray(res.rows) ? res.rows : []
					this.buildTaskSections(rows)
				})
			},
			//跳转对应任务
			toTask(item) {
				console.log(item)
				if (item.isCompleted) return
				if (item.integralTypeLable === '新手任务') {
					uni.navigateTo({
						url: '/subPackage_1/pages/mine/userInfo?userId=' + this.userId
					})
				}else{
					if(item.name === '添加健康数据指标'){
						uni.redirectTo({
							url: '/subPackage_1/pages/index/healthData/blood-sugar'
						})
					}else if(item.name === '阅读文章'){
						uni.switchTab({
							url: '/pages/expertScience/index'
						})
					}

					// uni.navigateTo({
					// 	url: '/subPackage_1/pages/mine/task/task-detail?taskId=' + item.id
					// })
				}

			}

		}
	}
</script>

<style scoped>
	.points-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 40rpx;
	}

	.points-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #FFB800;
		color: #fff;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: 500;
	}

	.points-display {
		position: relative;
		height: 300rpx;
		background-color: #ffd77c;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		color: #fff;
		padding-left: 40rpx;
	}

	.crown-bg {
		position: absolute;
		width: 360rpx;
		height: 360rpx;
		/* opacity: 0.2; */
		right: 0;
		bottom: 4;
	}

	.points-number {
		font-size: 60rpx;
		/* font-weight: bold; */
		margin-bottom: 20rpx;
		z-index: 1;
	}

	.points-actions {
		display: flex;
		gap: 40rpx;
		z-index: 1;
		font-size: 28rpx;
	}

	.daily-banner {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		color: #FF6B35;
	}

	.section {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.view-all {
		color: #999;
		font-size: 28rpx;
	}

	.task-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		margin: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.task-item:last-child {
		border-bottom: none;
	}

	.task-info {
		flex: 1;
	}

	.task-title {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}

	.task-points {
		color: #FFD678;
		margin-left: 10rpx;
	}

	.icon-right {
		font-size: 24rpx;
		color: #999;
	}

	.task-desc {
		color: #999;
		font-size: 24rpx;
	}

	.task-reward {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 10rpx;
	}

	.points {
		color: #FF6B35;
		font-size: 24rpx;
	}

	.status {
		color: #FFB800;
		font-size: 24rpx;
	}

	.status.completed {
		color: #F9D992;
	}

	.coin-icon {
		font-size: 32rpx;
	}

	.iconfont {
		font-family: "iconfont";
	}

	.task-title-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx;
		margin: 20rpx;
		/* background-color: #fff; */
		border-radius: 10rpx;
	}

	.main-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
	}

	.exchange-btn {
		color: #fff;
		font-size: 28rpx;
		background-color: #F9D992;
		padding: 10rpx 30rpx;
		border-radius: 10rpx;
	}

	.task-icon {
		width: 32rpx;
		height: 32rpx;
		margin: 0 10rpx;
	}
</style>